<style>
    /* .gsclass td{
        padding: 0 !important;box-sizing: content-box;height: 30px;line-height: 30px;
    } */
    .gsclass label {
        width: 100%;
        height: 100%;
        margin: 0;
        user-select: none;
        font-weight: normal;
    }

    .gsclass label input {
        margin-right: 100px !important;
    }
    .selval{
        max-height: 21vh;overflow: auto;margin-top: -20px;
    }
    .selval table{
        margin: 0;
    }
</style>
<div id="main">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="ntModalLabel">{:lang('add/change_company_attribute_profile')}</h4>
    </div>
    <div class="modal-body">
            <div class="row clearfix">
                    <div class="col-md-12 column">
                        <div class="alert alert-dismissable alert-info">
                        <button type="button" class="close">×</button>
                        <p></p>
                        </div>
                    </div>
                </div>
        <div class="row clearfix">
            <div class="col-md-12 column">
                <ul class="nav nav-tabs">
                    <li class="active">
                        <a href="#zh" data-toggle="tab" @click="changelang('zh')">{:lang('Chinese')}</a>
                    </li>
                    <li>
                        <a href="#en" data-toggle="tab" @click="changelang('en')">{:lang('English')}</a>
                    </li>
                    <li>
                        <a href="#pt" data-toggle="tab" @click="changelang('pt')">{:lang('Portuguese')}</a>
                    </li>
                </ul>
            </div>
        </div>
        <table class="table table-striped table-hover ntTable">
            <tbody>
            {if ($str neq 'coattredit')}
            <tr>
                <td style="width: 150px;">{:lang('attribute_name')}<span class="required"></span></td>
                <td>
                    <input type="text" class="form-control" placeholder="{:lang('attribute_name')}" v-model="coattrname">
                </td>
            </tr>
            {/if}
            </tbody>
        </table>

        <div class="row clearfix">
        
            <div class="col-md-6">
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="zh">
                        <table class="table table-striped table-hover ntTable">
                            <tbody>
                            {if ($str eq 'coattredit')}
                            <tr>
                                <td>{:lang('attribute_name')}<span class="required"></span></td>
                                <td>
                                    <input type="text" class="form-control" placeholder="{:lang('attribute_name')}" v-model="attrarr[0]">
                                </td>
                            </tr>
                            {/if}
                            <tr>
                                <td>{:lang('country')}<span class="required"></span></td>
                                <td>
                                    <select class="form-control" v-model="countries">
                                        <option value="0">{:lang('universal')}</option>
                                        <option value="1">{:lang('BRASIL')}</option>
                                        <option value="2">{:lang('CHINA')}</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td>个人<span class="required"></span></td>
                                <td>
                                    <label class="radio-inline" style="padding:0;">
                                        <input type="checkbox" value="option1" @click="changeper" :checked="personal">
                                        {:lang('this_attribute_is_suitabel_for_individuals')}
                                    </label>
                                </td>
                            </tr>
                            <tr>
                                <td>{:lang('type')}<span class="required"></span></td>
                                <td>
                                    <label class="radio-inline">
                                        <input type="radio" name="type_zh" value="text" id="typeText"
                                               :checked="typeclass=='text'" @click="changeche('text')"> {:lang('text')}
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="type_zh" value="select" id="typeSelect"
                                               :checked="typeclass=='select'" @click="changeche('select')"> {:lang('select_box')}
                                    </label>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="en">
                        <table class="table table-striped table-hover ntTable">
                            <tbody>
                            {if ($str eq 'coattredit')}
                            <tr>
                                <td>{:lang('attribute_name')}<span class="required"></span></td>
                                <td>
                                    <input type="text" class="form-control" placeholder="{:lang('attribute_name')}" v-model="attrarr[1]">
                                </td>
                            </tr>
                            {/if}
                            <tr>
                                <td>{:lang('country')}<span class="required"></span></td>
                                <td>
                                    <select class="form-control" v-model="countries">
                                        <option value="0">{:lang('universal')}</option>
                                        <option value="1">{:lang('BRASIL')}</option>
                                        <option value="2">{:lang('CHINA')}</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td>个人<span class="required"></span></td>
                                <td>
                                    <label class="radio-inline" style="padding:0;">
                                        <input type="checkbox" value="option1" @click="changeper" :checked="personal">
                                        {:lang('this_attribute_is_suitabel_for_individuals')}
                                    </label>
                                </td>
                            </tr>
                            <tr>
                                <td>{:lang('type')}<span class="required"></span></td>
                                <td>
                                    <label class="radio-inline">
                                        <input type="radio" name="type_en" value="text" id="typeText"
                                               :checked="typeclass=='text'" @click="changeche('text')"> {:lang('text')}
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="type_en" value="select" id="typeSelect"
                                               :checked="typeclass=='select'" @click="changeche('select')"> {:lang('select_box')}
                                    </label>
                                </td>
                            </tr>

                            </tbody>
                        </table>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="pt">
                        <table class="table table-striped table-hover ntTable">
                            <tbody>
                            {if ($str eq 'coattredit')}
                            <tr>
                                <td>{:lang('attribute_name')}<span class="required"></span></td>
                                <td>
                                    <input type="text" class="form-control" placeholder="{:lang('attribute_name')}" v-model="attrarr[2]">
                                </td>
                            </tr>
                            {/if}
                            <tr>
                                <td>{:lang('country')}<span class="required"></span></td>
                                <td>
                                    <select class="form-control" v-model="countries">
                                        <option value="0">{:lang('universal')}</option>
                                        <option value="1">{:lang('BRASIL')}</option>
                                        <option value="2">{:lang('CHINA')}</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td>个人<span class="required"></span></td>
                                <td>
                                    <label class="radio-inline" style="padding:0;">
                                        <input type="checkbox" value="option1" @click="changeper" :checked="personal">
                                        {:lang('this_attribute_is_suitabel_for_individuals')}
                                    </label>
                                </td>
                            </tr>
                            <tr>
                                <td>{:lang('type')}<span class="required"></span></td>
                                <td>
                                    <label class="radio-inline">
                                        <input type="radio" name="type_pt" value="text" id="typeText"
                                               :checked="typeclass=='text'" @click="changeche('text')"> {:lang('text')}
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="type_pt" value="select" id="typeSelect"
                                               :checked="typeclass=='select'" @click="changeche('select')"> {:lang('select_box')}
                                    </label>
                                </td>
                            </tr>

                            </tbody>
                        </table>
                    </div>
                </div>
                <table class="table table-striped table-hover ntTable">
                        <thead>
                            <tr>
                                <th>{:lang('selected_value')}</th>
                            </tr>
                        </thead>
                    </table>
                <div class="selval">
                    
                <table class="table table-striped table-hover ntTable" id="selectValue" v-if="typeclass=='select'" >
                    <tbody>
                    <tr v-for="(itemval,index) in selval">
                        <td>
                            <div class="input-group">
                                <input type="text" class="form-control" v-model="selval[index]">
                                <span class="input-group-btn">
                                        <button class="btn btn-default" type="button" @click="delrow(index)">
                                            <span class="glyphicon glyphicon-remove" style="margin:0"></span>
                                        </button>
                                    </span>
                            </div>

                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="input-group">
                                <input type="text" class="form-control addput">
                                <span class="input-group-btn">
                                    <button class="btn btn-default" type="button" @click="addrow">
                                        <span class="glyphicon glyphicon-plus" style="margin:0"></span>
                                    </button>
                                </span>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
                </div>
            </div>
            <div class="col-md-6 clearfix">
                <div class="cat_panel">
                    <table class="gsclass" v-cloak>
                        <thead>
                        <tr>
                            <td colspan="2">{:lang('company_type')}</td>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(item,index) in gstype">
                            <td>
                                <label>
                                    <input type="checkbox" @click="chestypefun(item.id)" :checked="item.is_che">
                                    {{item.content}}
                                </label>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

            </div>
        </div>
    </div>
    <div class="modal-footer">
        <input type="hidden" id="act" value="{$str}">
        <input type="hidden" id="did" value="{$id|default=''}">
        <button type="button" class="btn btn-default" data-dismiss="modal"><span
                class="glyphicon glyphicon-remove"></span>{:lang('cancel')}
        </button>
        <button type="button" class="btn btn-primary" @click="savefun" style="padding-left:24px;padding-right:24px">
            <span class="glyphicon glyphicon-floppy-disk"></span>{:lang('save')}
        </button>
    </div>
</div>
<script>
    new Vue({
        el: '#main',
        data: () => ({
            lang: 'zh',
            attrarr: ['', '', ''],
            typeclass: 'select',
            selval: [],
            gstype: [],
            checkall: [],
            iftijiao: true,
            countries: 0,
            coattrname: '',
            personal: true
        }),
        methods: {
            getdata(is){
                if ($('#act').val() == "coattradd")
                    $.ajax({
                        url: '/admin/customer/coattradd?getcoattr=""&lang=' + this.lang,
                        type: 'post',
                        success: (data) => {
                            this.gstype = JSON.parse(data)
                            this.gstype.map((element) => {
                                element.is_che = false
                            })
                        }
                    })
                else {
                    $.ajax({
                        url: '/admin/customer/coattredit?getcoattr=' + '&id=' + $('#did').val() + '&lang=' + this.lang,
                        type: 'post',
                        success: (data) => {
                            data = JSON.parse(data)

                            if (is) {
                                this.selval = data.coattr_select
                                data.is_text == 1 ? this.typeclass = 'select' : this.typeclass = 'text'
                                this.attrarr[0] = data.lang_zh
                                this.attrarr[1] = data.lang_en
                                this.attrarr[2] = data.lang_pt
                                this.countries = data.country_id
                                this.personal = data.person ? true : false
                                this.checkall = data.cotype_ids.split(",")
                            }
                            this.gstype = data.cotypedata
                            var cotype_ids = data.cotype_ids.split(',').map((element) => {
                                return element - 0
                            })
                            this.gstype.map((element) => {
                                if (cotype_ids.indexOf(element.id) == -1) {
                                    element.is_che = false
                                } else {
                                    element.is_che = true
                                }
                            })
                        }
                    })
                }
            },
            changeche(type){
                if (this.typeclass == 'select' && $('.addput').val().length) {
                    this.selval.push($('.addput').val())
                }
                this.typeclass = type
            },
            delrow(id){
                this.selval.splice(id, 1)
            },
            addrow(){
                this.selval.push($('.addput').val())
                $('.addput').val('')
            },
            chestypefun(did, index){
                if (this.checkall.indexOf(did + '') == -1) {
                    this.checkall.push(did + '')
                } else {
                    this.checkall.splice(this.checkall.indexOf(did + ''), 1)
                }
            },
            savefun(){
                if (this.iftijiao) {

                    if($('#act').val()=='coattredit'){
                        var data = {
                            lang_zh: this.attrarr[0],
                            lang_en: this.attrarr[1],
                            lang_pt: this.attrarr[2],
                            is_text: this.typeclass == 'text' ? 0 : 1,
                            option_text: this.typeclass == 'text' ? [] : JSON.parse(JSON.stringify(this.selval)),
                            cotype_ids: this.checkall,
                            act: $('#act').val(),
                            id: $('#did').val(),
                            country_id: this.countries,
                            person: this.personal ? 1 : 0,
                        }
                    }else {
                        var data = {
                            coattrname: this.coattrname,
                            is_text: this.typeclass == 'text' ? 0 : 1,
                            option_text: this.typeclass == 'text' ? [] : JSON.parse(JSON.stringify(this.selval)),
                            cotype_ids: this.checkall,
                            act: $('#act').val(),
                            id: $('#did').val(),
                            country_id: this.countries,
                            person: this.personal ? 1 : 0,
                        }
                    }
                    if (this.typeclass == 'select' && $('.addput').val().length) {
                        data.option_text.push($('.addput').val())
                    }
                    $.ajax({
                        url: '/admin/customer/' + $('#act').val(),
                        data,
                        type: 'post',
                        success: (data) => {
                            data = JSON.parse(data)
                            if (data.status != 1) {
                                change_mes_type('.modal-body .alert',data.status)
                                $('.modal-body .alert').show()
                                $('.modal-body .alert p').html('*'+data.msg+'<br>')
                                //toastr.warning(data.msg)
                            } else {
                                change_mes_type('.alert',data.status)
                                this.iftijiao = false
                                $('.alert').show()
                                $('.alert p').html('*'+data.msg+'<br>')
                                //toastr.info(data.msg)
                                $('#coatt_editModal').modal('toggle')
                            }
                        }
                    })
                }
            },
            changelang(lang){
                this.lang = lang
            },
            changeper(){
                this.personal = !this.personal
            }
        },
        mounted(){
            this.getdata(1)
            var lett = this;
            document.onkeydown = function(e) {
            var key = window.event.keyCode
            if (key == 13) {
            lett.savefun()
            }
            }
        },
        watch: {
            lang: function () {
                this.getdata()
            }
        }
    })
</script>